<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-05 14:39:28
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-07 16:50:35
 * @Description: 
-->
<template>
  <div class="menu-demo">
    <a-menu class="menu" mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px',color:'#000000' }" disabled>
        Vue3笔记
      </a-menu-item>
      <div>
        <a-menu-item key="1">Home</a-menu-item>
        <a-dropdown trigger="hover">
          <a-avatar trigger-type="mask" style="color: #fff">
            <img
              alt="avatar"
              style="border-radius: 50%"
              :src="user.avatar"
            />
            <template #trigger-icon>
              <IconEdit />
            </template>
          </a-avatar>
          <template #content>
            <a-doption>Option 1</a-doption>
            <a-doption>Option 2</a-doption>
            <a-doption>Option 3</a-doption>
          </template>
        </a-dropdown>
      </div>
    </a-menu>
  </div>
</template>

<script setup>
import { ref, reactive ,computed} from "vue";
import {useStore} from 'vuex'

const store = useStore()
const user = computed(()=>{
  return store.state.user
})

console.log(user);

</script>

<style lang="less" scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  line-height: 100%;
  background-color: var(--color-neutral-2);
  :deep(.arco-menu-overflow-wrap) {
    overflow: hidden;
    display: flex;
    padding: 0 40px;
    justify-content: space-between;
  }
  :deep(.arco-menu-item) {
    margin: 0 40px;
  }
  :deep(.arco-menu-inner) {
    padding: 0;
  }
}
</style>
